import React from 'react';
// import { TabBar , NavBar , Icon } from 'antd-mobile';
import { TabBar } from 'antd-mobile';
import { TabBarConf , TabBarItemConf } from "@tools/TabBarConfig";
import { Routers } from '@routers/Routers';
import { RoutersSecondConfig } from "@routers/RoutersConfig";
import { observer , inject } from "mobx-react";
import io from "socket.io-client";
// import { INavBarAPI } from '../../tools/AntdMobile';
import "@scss/Home.scss";

@inject("Home")
@observer
class Home extends React.Component<{ Home: IGlobalTypes.IHome , location: any , history: any },{}> {

    public componentWillMount() {
        const { setTab } = this.props.Home;
        const path: string = this.props.location.pathname;
        if(path.includes("Find")) {
            setTab("Find");
        }else if(path.includes("More")) {
            setTab("More");
        }else if(path.includes("Note")) {
            setTab("Note");
        }
        const socket = io(`${window.location.host}`,{
            path: "/websocket"
        });
        socket.on("connect",() => {
            console.log(`socket.connected = ${socket.connected}`);
        })
        socket.on("news",(info) => {
            console.log(`socket.news = ${JSON.stringify(info)}`);
            socket.emit("response",{
                info: '123',
                test: "world"
            })
        })
    }

    // public back() {
    //     const history: History = this.props.history;
    //     window.addEventListener("popstate",(event) => {
    //         console.log(event);
    //     });
    //     const pageStack: number = history.length;
    //     if(pageStack > 1) {
    //         history.go(-1);// 后退+刷新
    //         // history.back(); // 后退  具体用哪个 还没想好。。。chrome 上是goBack api里面是back。。。  还是用go吧
    //     }
    // }

    public render() {
        // navbar 有点丑。。。 删了
        // const navBarConf: INavBarAPI = {
        //     mode: 'light',
        //     icon: this.props.history.length > 1 ? <Icon type="left" /> : null
        // };
        const { hidden , selectedTab , setTab } = this.props.Home;
        const { history } = this.props;
        return (
            <div className="HomeRoot">
                {/* <NavBar { ...navBarConf } onLeftClick={ () => this.back() }>{ this.state.selectedTab }</NavBar> */}
                <div className="HomeContent">
                    <Routers config={ RoutersSecondConfig } level={ 2 }/>
                </div>
                <TabBar { ...TabBarConf }
                hidden={ hidden }>
                    {
                        TabBarItemConf.map(item => {
                            return <TabBar.Item { ...item }
                                key={ item.key }
                                selected={ selectedTab === item.key }
                                onPress={() => {
                                    history.push(`/home/${item.key}`);
                                    setTab(item.key);
                                }} />
                        })
                    }
                </TabBar>
            </div>
        )
    }
}

export default Home;